<template>
  <view v-if="datas.length > 0" class="recommend">
    <view class="recommend__title">
      <view class="recommend__title-line left" />
      <text class="recommend__title-text">猜你喜欢</text>
      <view class="recommend__title-line right" />
    </view>
    <view class="recommend__list">
      <skeleton
        v-for="item in datas"
        :key="item._id"
        animate
        :row="3"
        :row-height="['100px', '16px', '20px']"
        row-distance="8px"
        :loading="loading"
        class="recommend__item"
      >
        <navigator
          :url="item._id ? `/pages/bookdetail/index?id=${item._id}` : ''"
          hover-class="none"
        >
          <view class="recommend__item-img-wrap">
            <LazyLoadImg
              class="recommend__item-img"
              threshold="0"
              width="100%"
              height="150"
              img-mode="scaleToFill"
              :image="item.img_url"
            />
          </view>
          <text class="recommend__item-title">{{ item.name }}</text>
          <text class="recommend__item-des ellipsis">{{ item.des }}</text>
        </navigator>
      </skeleton>
    </view>
    <navigator
      v-if="hasMore"
      class="recommend__more"
      :url="`/pages/classify/index?tab=${classify}`"
      >查看更多 >></navigator
    >
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import LazyLoadImg from '@/components/LazyLoadImg2';

export default {
  components: {
    LazyLoadImg,
  },

  props: {
    keyStr: {
      type: String,
      default: 'default', // 推荐标识
    },
    extra: {
      type: Object,
      default: {}, // 额外参数
    },
    classify: {
      type: String,
      default: '', // 当前分类
    },
  },

  data() {
    return {
      datas: [1, 2, 3, 4, 5, 6],
      loading: true,
      hasMore: false,
    };
  },

  computed: {
    ...mapGetters(['userid']),
  },

  watch: {
    extra(newValue, oldValue) {
      this.fetchRecommendData();
    },
  },

  methods: {
    fetchRecommendData() {
      this.$http({
        method: 'POST',
        url: '/api/front/recommend',
        data: {
          userid: this.userid,
          key: this.keyStr,
          extra: this.extra,
        },
        skipToast: true,
      }).then((res) => {
        if (res.ok && res.data) {
          this.datas = res.data;
          this.loading = false;
          this.hasMore = !!res.hasMore;
        }
      });
    },
  },

  created() {
    this.fetchRecommendData();
  },
};
</script>

<style lang="scss">
.recommend {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30rpx 32rpx 10rpx;
  margin-top: 16rx;
  background: #fff;

  &__title {
    margin-bottom: 30rpx;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    &-text {
      color: $font-color-dark;
      font-size: 30rpx;
    }

    &-line {
      width: 120rpx;
      height: 2rpx;
      background: $font-color-light;

      &.left {
        margin-right: 20rpx;
      }

      &.right {
        margin-left: 20rpx;
      }
    }
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  &__item {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    flex: 30%;
    max-width: 31%;
    margin-right: 26rpx;
    margin-bottom: 40rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }

    &-img-wrap {
      margin-bottom: 8rpx;
    }

    &-img {
      width: 100%;
      height: 320rpx;
      height: auto;
      border-radius: 10rpx;
    }

    &-title {
      color: $font-color-dark;
      font-size: $font-sm;
      margin-top: 16rpx;
      margin-bottom: 4rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      display: block;
    }

    &-des {
      color: $font-color-light;
      font-size: $font-sm;
    }
  }

  &__more {
    padding: 8rpx 30rpx;
    font-size: $font-base;
    color: $font-color-normal;
    margin-bottom: 8rpx;
    border-radius: 6rpx;
  }
}
</style>
